<template>
  <!-- 评价页面 -->
  <Hand title="评价" :left="true" :iconbool="false" @back="fn"></Hand>
  <div class="box">
    <div class="labelone">
      <p class="onepo">店铺评价</p>
      <div class="labelonemain">
        <img src="@/img/门店图片/u2732.png" alt="" />
        <div>
          <p class="Labtitle">OMINI来福士广场店</p>
          <p class="Labtitle1">上海市来福士1层32号</p>
          <van-tag mark type="primary">新店</van-tag>&emsp;
          <van-tag mark type="danger ">营业中</van-tag>
        </div>
      </div>
      <div class="labelscore">
        <p>评分：</p>
        <van-rate v-model="value1" :size="20" color="#ffd21e" void-icon="star" void-color="#eee" />
      </div>
      <van-cell-group inset>
        <van-field v-model="message" rows="2" label="详细评价：" type="textarea" maxlength="200" placeholder="请输入留言"
          show-word-limit label-align="left" label-width="20vw" />
      </van-cell-group>
    </div>
    <div class="labeltwo">
      <p class="onepo">回收员评价</p>
      <div class="labelonemain">
        <img src="@/img/骑手图片/u6826.png" alt="" />
        <div>
          <p class="Labtitle">赵师傅<span>已完成&nbsp;9999&nbsp;单</span></p>
          <p class="Labtitle1">13255486659</p>
          <van-tag mark type="primary">诚信</van-tag>&emsp;
          <van-tag mark type="danger ">服务好</van-tag>
        </div>
      </div>
      <div class="labelscore">
        <p>评分：</p>
        <van-rate v-model="value" :size="20" color="#ffd21e" void-icon="star" void-color="#eee" />
      </div>
      <van-cell-group inset>
        <van-field v-model="message1" rows="2" label="详细评价：" type="textarea" maxlength="200" placeholder="请输入留言"
          show-word-limit label-align="left" label-width="20vw" />
      </van-cell-group>
    </div>

    <div class="labeltre">
      <h4>订单详情</h4>
      <p>详细地址：<span>中国矿业大学南湖校区</span></p>
      <p class="labeltreText">联系人：<span>刘小牛</span></p>
      <p>联系电话：<span>188****1554</span></p>
      <p>上门时间：<span>2019-8-2  13:00</span></p>
      <p>回收内容：<span>塑料瓶、纸箱</span></p>
      <p>预计重量：<span>2KG</span></p>
      <p class="labeltreText1">备注：<span>需要协助分类</span></p>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Hand from "../../components/Hand.vue";
import { useRouter } from "vue-router";
const router = useRouter();

const value = ref(3);


const message = ref("");
const message1 = ref("");
const value1 = ref(3)
function fn() {
  router.back();
}
</script>

<style lang="less" scoped>
.box {
  background-color: #edfdfa;
  width: 100vw !important;
  height: 100vh;
  overflow: auto;

  .labelone,
  .labeltwo {
    margin: 20px;
    background-color: white;
    width: 89vw;
    height: 70vw;
    border-radius: 3vw;

    .onepo {
      margin-left: 5vw;
      padding: 3vw;
    }

    .labelonemain {
      display: flex;
      margin-left: 6vw;
      margin-bottom: 6vw;

      img {
        width: 18.667vw;
        height: 18.667vw;
      }

      div {
        margin-left: 5vw;
        font-size: 14px;

        .Labtitle {
          font-weight: bolder;
          font-size: 18px;
          margin-bottom: 2vw;
          position: relative;

          span {
            color: #ccc;
            font-size: 2vw;
            position: absolute;
            right: -30vw;
            top: 1vw;
          }
        }

        .Labtitle1 {
          margin-bottom: 2vw;
        }
      }
    }

    .labelscore {
      margin-left: 13.9vw;
      display: flex;
      font-size: 3.667vw;
    }
  }

  .labeltre {
    margin: 20px;
    background-color: white;
    width: 89vw;
    height: 100vw;
    border-radius: 3vw;

    h4 {
      margin-left: 5vw;
      padding: 3vw;
    }

    p {
      font-size: 3.067vw;
      margin: 7vw;
      font-weight: bolder;
    }

    span {
      font-size: 1.867vw;
      color: dimgrey;
      margin-left: 5vw;
    }

    .labeltreText {
      margin-left: 10vw;
    }

    .labeltreText1 {
      margin-left: 13vw;
    }
  }
}
</style>
